﻿﻿var CPUXYS = [
{X: 0 , Y: -22},
{X: 0 , Y: -22},
{X: 9 , Y: -20},
{X: 16 , Y: -16},
{X: 21 , Y: -9},
{X: 23 , Y: 0},
{X: 21 , Y: 9},
{X: 16 , Y: 16},
{X: 9 , Y: 21},
{X: 0 , Y: 23},
{X: -9 , Y: 20},
{X: -16 , Y: 16},
{X: -21 , Y: 8},
{X: -22 , Y: 0},
{X: -21 , Y: -9},
{X: -15 , Y: -16},
{X: -8 , Y: -21}
];
var canvas = null;//全局变量 画布这个dom 绑定事件用
var context = null;//全局变量 画布这个对象 画东西用
// 	保存画布上所有的对象
var circles = [];
// 	画布原有的对象
var oldCircles = [];
//	画布上的线的对象
var lineObjs = [];
//	画布上所有的图片
var imgs = [];
//鼠标点击 如果选中一个元素 这个就是选中的那个元素
var previousSelectedCircle;
//选中的元素的初始位置
var chooseObjInitPlace = {};
// 这时需要判断有没有连线连在这个元素上
var dragLines1 = [];
// 这时需要判断有没有连线连在这个元素上
var dragLines2 = [];
//是否在拖拽
var isDragging = false;
//鼠标放开了 判断一下落点是否有元素 如果有元素 拖动的元素归位 并且连线
var lineObj = null;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的开始的元素
var previousSelectedCircleStartLine;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的结束的元素
var previousSelectedCircleEndLine;
// 画布上所有的一级
var canvasAllLevel1 = [];
// 画布上所有的二级
var canvasAllLevel2 = [];
// 画布上所有的三级
var canvasAllLevel3 = [];
// 画布上所有的三级
var canvasAllLevelObj = [];
//画布类型 如果是1 代表一级为主机 二级为板卡 如果是2 代表一级为板卡 二级为处理单元
var canvasType = 1;
//拖拽的那个元素是否是初始化中的元素
var canvasIsInitDom = true;
//拖拽的元素的级别
var canvasTuoLevel = 0;
//拖拽二级元素的时候 记录二级元素原始位置
var canvasAllLevel2OldObj = null;
var moveAllObjs = [];//拖动的时候跟随的元素 最后要画这个东西 让这个东西在最上面
/**
 *	初始化画布
 *	参数: 宽 高
 *	x , y
 *	data.width , data.height
 *	data.x , data.y
 *	type : 画布类型
 *	fun1 : 连线时候的回调
 *	fun2 : 断开连线时候的回调
 * 	fun3 : 双击连线的时候回调
 *	fun4 : 双击图标的时候回调
 **/
var canvasInitData = {};
var levelType=0;
var doubleFlag=true;
/**调试demo**/
var table_box_scroll_top = 0;//滚动条滚动的高度
/**调试demo**/
function init_canvas(data ,type , fun1 , fun2,fun3,fun4,fun5){
    canvasType = type;
    loadOneImage('./images/topology/boarder.png');
    $(".table-box").append('<canvas style="position: absolute; top: ' + data.y + 'px;left : ' + data.x + 'px;" id="myCanvas" height="'+data.height+'"  width="'+data.width+'"></canvas>');
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    var funObj = {fun1:fun1,fun2:fun2,fun3:fun3,fun4:fun4,fun5:fun5};
    $(canvas).bind('mousedown', canvasClick);
    $(canvas).bind('click', canvasMouseClick);
    $(canvas).bind('mouseup' , funObj , outMouseDragging);
	$(canvas).bind('mousedown',funObj, canvasLevel3Click);
    $(canvas).bind('mouseout' , funObj , outMouseDragging);
    $(canvas).bind('mousemove' , dragCircle);
    $(canvas).bind('dblclick' , funObj , canvasDbClick);
    $(canvas).bind('dblclick' , funObj , appDbClick);
    canvasInitData.data = data;
    canvasInitData.fun1 = fun1;
    canvasInitData.fun2 = fun2;
	/**调试demo**/
	$(".table-box").scroll(function() {
	cancelChoose();
	table_box_scroll_top = $(".table-box").scrollTop();
	var initData = new Array();
	for(var i = 0 ; i < circlesData1.length ; i++){
		var obj = circlesData1[i];
		var newObj = {};
		newObj.x = obj.x;
		newObj.y = obj.y + table_box_scroll_top;
		newObj.width = obj.width;
		newObj.height = obj.height;
		newObj.img = obj.img;
		newObj.level = obj.level;
		newObj.text = obj.text;
		initData.push(newObj);
	}
	circles = initData;
	drawCircles();
	/**调试demo**/
	});
    if(canvasType == 1){
        //一级为主机
        var initData = new Array();
        for(var i = 0 ; i < circlesData1.length ; i++){
            var obj = circlesData1[i];
            var newObj = {};
            newObj.x = obj.x;
            newObj.y = obj.y + table_box_scroll_top;
            newObj.width = obj.width;
            newObj.height = obj.height;
            newObj.img = obj.img;
            newObj.level = obj.level;
            newObj.text = obj.text;
            initData.push(newObj);
        }
        circles = initData;
    }else if(canvasType == 2){
        //一级为板卡
        var initData = new Array();
        for(var i = 0 ; i < circlesData2.length ; i++){
            var obj = circlesData2[i];
            var newObj = {};
            newObj.x = obj.x;
            newObj.y = obj.y + table_box_scroll_top;
            newObj.width = obj.width;
            newObj.height = obj.height;
            newObj.img = obj.img;
            newObj.level = obj.level;
            newObj.text = obj.text;
            newObj.imgId=obj.imgId;
            initData.push(newObj);
        }
        circles = initData;
    }else if(canvasType == 3){
        //一级为板卡
        var initData = new Array();
        for(var i = 0 ; i < circlesData3.length ; i++){
            var obj = circlesData3[i];
            var newObj = {};
            newObj.x = obj.x;
            newObj.y = obj.y + table_box_scroll_top;
            newObj.width = obj.width;
            newObj.height = obj.height;
            newObj.img = obj.img;
            newObj.level = obj.level;
            newObj.text = obj.text;
            newObj.imgId=obj.imgId;
            initData.push(newObj);
        }
        circles = initData;
    }
    drawCircles();
}

/**
 *	对画板上的对象重新操作后 进行重绘的方法
 */
function drawCircles() {
    // 清除画布，准备绘制
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 遍历所有对象
    for(var i=0; i<circles.length; i++) {
        var circle = circles[i];
        // 绘制对象
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height , null);
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "#eeeeee";
        }else if(circle.text != null){
            drawOneFont(circle);
        }else{
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "#eeeeee";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        context.fill();
        context.stroke();
    }

    // 遍历所有一级 还有title和count
    for(var i=0; i<canvasAllLevel1.length; i++) {
        var circle = canvasAllLevel1[i];
        // 绘制对象
        context.beginPath();
        //context.fillStyle = "#eeeeee";
        context.fillStyle = "#FFFFFF";
        context.strokeStyle = "#eeeeee";

        context.shadowColor = "#EEEFF1";
        context.shadowBlur =10;
        drawOneImage(circle.img , circle.x, circle.y+40,circle.width , circle.height , null);
        if(circle.text != null){
            drawOneFont(circle);
        }
        context.fill();
        context.fillRect(circle.x,circle.y ,circle.width , circle.height);
        context.lineWidth = 0;
        if(circle.title!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect(circle);
        }
        drawOneImage('../images/main.png', circle.x+25, circle.y+20,10 , 10, null);

        if(levelType==1){
            context.strokeStyle = "#FFFFFF";
        }else{
            context.strokeStyle = "#FFFFFF";
        }
       
       context.stroke();
       context.beginPath();
       context.fillStyle = "#eeeeee";
       context.strokeStyle ='#FFFFFF';  //设置线的颜色状态
       context.shadowBlur =0;
       doLine3(circle.x+25,circle.y+50,circle.x+circle.width-20,circle.y+50);
       context.stroke();
    }

    // 遍历所有二级
    for(var i=0; i<canvasAllLevel2.length; i++) {
        var circle = canvasAllLevel2[i];
        // 绘制对象
        context.beginPath();
        context.fillStyle = "#eeeeee";
        if(circle.color){
            context.fillStyle = circle.color;
        }
        context.strokeStyle = "#EFF0F2";
        context.shadowColor = "#EEEFF1";
        context.shadowBlur =10;
        context.fillRect(circle.x,circle.y ,circle.width , circle.height);
        drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height , circle);

        context.fill();
        if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }else{
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.title2!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect2(circle);
        }
        if(levelType==2){
            context.strokeStyle = circle.color;
        }else{
            context.strokeStyle = "#FFFFFF";
        }
        context.stroke();
    }

    // 遍历所有三级
    for(var i=0; i<canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        // 绘制对象
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height , null);
        }else if(circle.text != null){
            drawOneFont(circle);
            //绘制
        }else{
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }

        context.fillStyle = "#eeeeee";
        context.strokeStyle = "black";
        context.fill();
        if(levelType==3){
            context.strokeStyle = circle.color;
        }else{
            context.strokeStyle = "#FFFFFF";
        }
        context.stroke();
    }
    // 遍历所有框
    for(var i=0; i<canvasAllLevelObj.length; i++) {
        var circle = canvasAllLevelObj[i];
        // 绘制对象
        context.beginPath();
        //context.fillStyle = "#eeeeee";
        context.strokeStyle = circle.color;
        //context.fill();
        if(levelType==0){
            context.strokeStyle = circle.color;
        }else{
           // context.strokeStyle = "#000000";
        }
        context.strokeRect(circle.x,circle.y ,circle.width , circle.height);
        context.stroke();

    }
    //遍历所有线的对象
    for(var i=0; i<lineObjs.length; i++) {
        var lineObj = lineObjs[i];
        // 绘制线
        DrawLine(lineObj.obj1 , lineObj.obj2 , lineObj.count , context);
        
    }
    //十字画线的时候 执行画线
    if(drawLineObj != null && drawLineObj.startx!=null){
        DrawLine2(drawLineObj , context);
    }
    
    //最后再画一下拖拽的元素 让其在画布的最上面
    for(var i = 0 ; i< moveAllObjs.length ; i++){
    	 var circle = moveAllObjs[i];
         // 绘制对象
         context.beginPath();
         context.fillStyle = circle.color;
         context.fillStyle = "#eeeeee";
         context.strokeStyle = "#FFFFFF";
         context.shadowColor = "#EEEFF1";
         context.shadowBlur =10;
         context.fillRect(circle.x,circle.y ,circle.width , circle.height);
         drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height , circle);

         context.fill();
         if(circle.text != null){
             drawOneFont(circle);
             //绘制
         }else{
             context.rect(circle.x,circle.y ,circle.width , circle.height);
         }
         if(circle.title2!=null) {
             context.fillStyle = "#eeeeee";
             context.strokeStyle = "black";
             drawOneRect2(circle);
         }
         if(levelType==2){
             context.strokeStyle = circle.color;
         }else{
             context.strokeStyle = "#FFFFFF";
         }
         context.stroke();
    }
}

/**
 *右键菜单
 */
 var deleteCpu={};
 var preCanvasAllLevel2=[];
 var curindex=-1;
 var deleteLevel = 0;
function canvasLevel3Click(e){
	var isChoose = false;
    var type=e.which;
    if(type!=3){
        return false;
    }else{
        // 取得画布上被单击的点
        var clickX = e.pageX - canvas.offsetLeft-320;
        var clickY = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
     // 查找被单击的對象
        for(var i = 0 ; i < canvasAllLevel2.length; i++) {
            var circle = canvasAllLevel2[i];
            if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                //选中了这个元素
				isChoose = true;
				cancelChoose();
				curindex=i;
				deleteCpu=circle;
				//prePindex=circle.pIndex;
                $(".rightKey").css({left:(345+clickX)+"px",top:(50+clickY-table_box_scroll_top)+"px"});
                $(".rightKey").show();
                deleteLevel = 2;
				e.stopPropagation();
                break;
            }
        }
     // 查找被单击的對象
        if(!isChoose){
        	for(var i = 0 ; i < canvasAllLevel1.length; i++) {
        		var circle = canvasAllLevel1[i];
        		if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
        			//选中了这个元素
        			isChoose = true;
        			curindex=i;
        			deleteCpu=circle;
        			//prePindex=circle.pIndex;
        			$(".rightKey").css({left:(345+clickX)+"px",top:(50+clickY-table_box_scroll_top)+"px"});
        			$(".rightKey").show();
        			deleteLevel = 1;
        			e.stopPropagation();
        			break;
        		}
        	}
        }
		if(!isChoose){
			//没有选中的元素 清空所有数据
			curindex = -1;
			deleteCpu = {};
			deleteLevel = 0;
		}
    }
	return true;
}
/**
*	删除level2元素
*/
function deleteLevel2(){
	if(curindex != -1){
		if(deleteLevel == 2){
			//把level2s数据中 下角标为curindex 的数据删除 
			deleteOneLevel2(curindex , deleteCpu.pIndex);
			//并且重新定位其他元素
		}else if(deleteLevel == 1){
			//删除某主机 并且把这个主机下所有的板卡都删掉 如果删除的是第一个主机 判断是否有第二个主机 重新计算第二个主机的位置 还有第二个主机下所有板卡的位置
			deleteOneLevel1(curindex , deleteCpu.pIndex);
		}
	}
	drawCircles();
}
/**
*	删除level2元素后 重新定位这个主机中所有板卡的位置
*	index:level2数据中的下角标  pIndex哪一个主机
*/
function deleteOneLevel1(index){
	if(index == 0 && canvasAllLevel1.length > 1 ){
		//删除第一个主机 有第二个主机 重新计算那个主机和板卡的位置
		canvasAllLevel1.splice(index,1);
		//删除这个主机下所有的板卡
		for(var i = 0 ; i < canvasAllLevel2.length ; i++){
			if(canvasAllLevel2[i].pIndex == index){
				canvasAllLevel2.splice(i--,1);
			}
		}
		canvasAllLevel1[0].x = 50;
		canvasAllLevel1[0].y = 80;
		canvasAllLevel1[0].width = 180;
		canvasAllLevel1[0].height = 220;
		for(var i = 0 ; i < canvasAllLevel2.length ; i++){
			canvasAllLevel2[i].pIndex = 0
		}
		deleteAllLevel2ByPIndex(0);
	}else{
		//没有第二个主机 或者要删除的就是第二个主机 不需要计算
		canvasAllLevel1.splice(index,1);
		//删除这个主机下所有的板卡
		for(var i = 0 ; i < canvasAllLevel2.length ; i++){
			if(canvasAllLevel2[i].pIndex == index){
				canvasAllLevel2.splice(i--,1);
			}
		}
	}
}
var canvasAllLevel2Init = [];//一个中间变量
var canvasAllLevel2Init2 = [];//这个主机下所有的二级元素
/**
*	删除level2元素后 重新定位这个主机中所有板卡的位置
*	index:level2数据中的下角标  pIndex哪一个主机
*/
function deleteOneLevel2(index , pIndex){
	canvasAllLevel2Init = new Array();
	canvasAllLevel2Init2 = new Array();
    for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        if(i == index){
            continue;
        }
        var circleObj = {};
        circleObj.x = canvasAllLevel2[i].x;
        circleObj.y = canvasAllLevel2[i].y;
        circleObj.img = canvasAllLevel2[i].img;
        circleObj.width = canvasAllLevel2[i].width;
        circleObj.height = canvasAllLevel2[i].height;
        circleObj.id = canvasAllLevel2[i].id;
        circleObj.board = canvasAllLevel2[i].board;
        circleObj.pIndex = canvasAllLevel2[i].pIndex;
        circleObj.index = canvasAllLevel2[i].index;
        circleObj.title2 = canvasAllLevel2[i].title2;
        canvasAllLevel2Init.push(circleObj);
    }
	canvasAllLevel2 = canvasAllLevel2Init;
	
	deleteAllLevel2ByPIndex(pIndex);
	//重新定位 另一个主机的位置 以及另一个主机下所有的二级元素的位置
	if(pIndex == 0 && canvasAllLevel1.length > 1){
		deleteAllLevel2ByPIndex(1);
	}
	
	drawCircles();
}
/**
*	某主机下的二级元素都保留完毕 删除这个主机下所有的二级元素数据
*/
function deleteAllLevel2ByPIndex(pIndex){
	
	canvasAllLevel2Init2 = new Array();
	for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        if(canvasAllLevel2[i].pIndex == pIndex){
			var circleObj = {};
			circleObj.x = canvasAllLevel2[i].x;
			circleObj.y = canvasAllLevel2[i].y;
			circleObj.img = canvasAllLevel2[i].img;
			circleObj.width = canvasAllLevel2[i].width;
			circleObj.height = canvasAllLevel2[i].height;
			circleObj.id = canvasAllLevel2[i].id;
			circleObj.board = canvasAllLevel2[i].board;
			circleObj.pIndex = canvasAllLevel2[i].pIndex;
			circleObj.index = canvasAllLevel2[i].index;
			circleObj.title2 = canvasAllLevel2[i].title2;
			canvasAllLevel2Init2.push(circleObj);
        }
    }
	
	canvasAllLevel2Init = new Array();
    for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        if(canvasAllLevel2[i].pIndex == pIndex){
            continue;
        }
        var circleObj = {};
        circleObj.x = canvasAllLevel2[i].x;
        circleObj.y = canvasAllLevel2[i].y;
        circleObj.img = canvasAllLevel2[i].img;
        circleObj.width = canvasAllLevel2[i].width;
        circleObj.height = canvasAllLevel2[i].height;
        circleObj.id = canvasAllLevel2[i].id;
        circleObj.pIndex = canvasAllLevel2[i].pIndex;
        circleObj.index = canvasAllLevel2[i].index;
        circleObj.color = canvasAllLevel2[i].color;
        circleObj.title2 = canvasAllLevel2[i].title2;
        circleObj.board = canvasAllLevel2[i].board;
        canvasAllLevel2Init.push(circleObj);
    }
	canvasAllLevel2 = canvasAllLevel2Init;
	canvasAllLevel1[pIndex].width = 180;
	canvasAllLevel1[pIndex].height = 220;
	for(var i = 0 ; i < canvasAllLevel2Init2.length ; i++){
		reloadAllLevel2(canvasAllLevel2Init2[i] , pIndex);
	}
}
/**
*	重新定位某主机下所有的板卡
*/
function reloadAllLevel2(canvasAllLevel2Obj , index){
	var myCount = 0;
	for(var i = 0 ; i < canvasAllLevel2.length ; i++){
		var canvasLevel2 = canvasAllLevel2[i];
		if(canvasLevel2.pIndex == index){
			//记录我这个主机下有多少个板卡
			myCount++;
		}
	}

	canvasAllLevel1[index].count = myCount+1;
	//计算我这个一级的宽度
	if(myCount > 3){

		//宽度固定了  判断是否需要改变主机的高度
		if(myCount % 4 == 0){
			//另起一排 增加本主机的高度
			canvasAllLevel1[index].height = canvasAllLevel1[index].height + 120;
			canvasAllLevel2Obj.y = canvasAllLevel1[index].y + 80 + 120*(myCount / 4);
			canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30;
		}else{
		   // canvasAllLevel2Obj.y = canvasAllLevel1[index].y + 40 + 160*((myCount -( myCount%4)) / 4);
			canvasAllLevel2Obj.y = canvasAllLevel1[index].y + 80 + 120*((myCount -( myCount%4)) / 4);

			canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30 + 130*(myCount%4);
		}
	}else{
		canvasAllLevel2Obj.y = 160;
		//不足四个 第一排增加元素 主机宽度增加 如果是一个元素并且有第二个主机 第二个主机往右移动
		if(myCount != 0){
			canvasAllLevel1[index].width = canvasAllLevel1[index].width + 130;
			canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30 + 130*myCount;
		}else{
			canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30;
		}
		if(index == 0 && canvasAllLevel1.length == 2){
			//是一个元素并且有第二个主机 第二个主机往右移动
			canvasAllLevel1[1].x = (canvasAllLevel1[0].x + canvasAllLevel1[0].width + 80);
			if(myCount != 0){
				for(var k = 0 ; k < canvasAllLevel2.length ; k++){
					var canvasAllLevel1Obj = canvasAllLevel2[k];
					if(canvasAllLevel1Obj.pIndex == 1){
						canvasAllLevel1Obj.x = (canvasAllLevel1Obj.x + 130);
					}
				}
			}
		}
	}
	canvasAllLevel2.push(canvasAllLevel2Obj);
}
/**
 *画布双击,查询是否点击的app
 */
function appDbClick(e){
	$(".editPOP").hide();
	doubleFlag = false;
	var isLevel1=true;
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
    //遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
    //遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
    for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        var circle = canvasAllLevel2[i];
        //代表 我鼠标双击的位置 是在图片范围内
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
        	$(".editPOP").hide();
           isLevel1=false;
            break;

        }
    }
    if(isLevel1){
	  for(var i = 0 ; i < canvasAllLevel1.length ; i++){
	        var circle = canvasAllLevel1[i];
	        //代表 我鼠标双击的位置 是在图片范围内
	        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
	            //选中了这个元素
	        	$(".editPOP").hide();
	            if(e.data.fun4) {
	                //说明点到图了
	                e.data.fun4(circle);
	            }
	            break;

	        }
	    }
    }
  
    setTimeout(function(){
    	doubleFlag = true;
    },2000);
}

/**
 * 	画布双击 查询是否有点击的连线
 */
function canvasDbClick(e){
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
    //遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
    for(var i = 0 ; i < lineObjs.length ; i++){
        var obj1 = lineObjs[i].obj2;
        var obj2 = lineObjs[i].obj1;
        if(clickX < obj1.x && clickX > obj2.x && clickY < obj1.y && clickY > obj2.y){
            //代表 我鼠标双击的位置 是在两个连线的元素的中间
            var x = Math.abs(obj1.x - obj2.x);
            var y = Math.abs(obj1.y - obj2.y);

            var smallX = obj1.x < obj2.x ? obj1.x : obj2.x;
            var smallY = obj1.y < obj2.y ? obj1.y : obj2.y;
            var xabs=Math.abs(clickX - smallX);
            var yabs=Math.abs(clickY - smallY);

            var xBili = xabs / x;
            var yShould = y*xBili;

        }else if(clickX < obj1.x && clickX > obj2.x && clickY > obj1.y && clickY < obj2.y){
            //代表 我鼠标双击的位置 是在两个连线的元素的中间
            var x = Math.abs(obj1.x - obj2.x);
            var y = Math.abs(obj1.y - obj2.y);

            var maxX = obj1.x > obj2.x ? obj1.x : obj2.x;
            var smallY = obj1.y < obj2.y ? obj1.y : obj2.y;
            var xabs=Math.abs(clickX - maxX);
            var yabs=Math.abs(clickY - smallY);

            var xBili = xabs / x;
            var yShould = y*xBili;

        }else if(clickX > obj1.x && clickX < obj2.x && clickY < obj1.y && clickY > obj2.y){
            //代表 我鼠标双击的位置 是在两个连线的元素的中间
            var x = Math.abs(obj1.x - obj2.x);
            var y = Math.abs(obj1.y - obj2.y);

            var maxX = obj1.x > obj2.x ? obj1.x : obj2.x;
            var smallY = obj1.y < obj2.y ? obj1.y : obj2.y;
            var xabs=Math.abs(clickX - maxX);
            var yabs=Math.abs(clickY - smallY);

            var xBili = xabs / x;
            var yShould = y*xBili;

        }else if(clickX > obj1.x && clickX < obj2.x && clickY > obj1.y && clickY < obj2.y) {
            //代表 我鼠标双击的位置 是在两个连线的元素的中间
            var x = Math.abs(obj1.x - obj2.x);
            var y = Math.abs(obj1.y - obj2.y);

            var smallX = obj1.x < obj2.x ? obj1.x : obj2.x;
            var smallY = obj1.y < obj2.y ? obj1.y : obj2.y;

            var smallX = obj1.x < obj2.x ? obj1.x : obj2.x;
            var smallY = obj1.y < obj2.y ? obj1.y : obj2.y;
            var xabs=Math.abs(clickX - smallX);
            var yabs=Math.abs(clickY - smallY);

            var xBili = xabs / x;
            var yShould = y*xBili;
        }else if((clickY < obj1.y+10)||(clickY > obj1.y-10) && (obj1.y == obj2.y)){
            var x = Math.abs(obj1.x - obj2.x);

            var smallX = obj1.x < obj2.x ? obj1.x : obj2.x;
            var xabs=Math.abs(clickX - smallX);
            if (e.data.fun3) {
                if (xabs<x) {
                    //说明点到线了
                    e.data.fun3(obj1,obj2);
                }
            }
        }else if((clickX < obj1.x+10)||(clickX > obj1.x-10) && (obj1.x == obj2.x)){
            var y = Math.abs(obj1.y - obj2.y);

            var smally = obj1.y < obj2.y ? obj1.y : obj2.y;
            var yabs=Math.abs(clicky - smally);
            if (e.data.fun3) {
                if (yabs<y) {
                    //说明点到线了
                    e.data.fun3(obj1,obj2);
                }
            }
        }
        if (e.data.fun3) {
            if (yShould > (yabs - 10) && yShould < (yabs + 10)) {
                //说明点到线了
                e.data.fun3(obj1,obj2);
            }
        }

    }
}
/**画主机板卡横线*/
function doLine3(str1,str2,end1,end2){
    context.beginPath();
	context.moveTo (str1,str2);       //设置起点状态
	context.lineTo (end1,end2);       //设置末端状态
	context.lineWidth = 1;          //设置线宽状态
	context.strokeStyle ='#E8E9EB';  //设置线的颜色状态
	context.stroke(); 
}
/**
 *	画一个一级元素   需要带title count
 */
function drawOneRect(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 1;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(circle.title, circle.x+40, circle.y+30)

    var text = '';
    if(canvasType == 1 || canvasType == 3){
        text = circle.count +'个板卡';
    }else if(canvasType == 2){
        text = circle.count +'个单元';
    }
    context.fillStyle = "#999999";
    context.fillText(text, circle.x -20+ circle.width - 50, circle.y+30)
    

}
/**
 *	画一个二级元素   需要带title count
 */
function drawOneRect2(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);
    var curTile=circle.title2;
    if(curTile.length>5){
    	curTile=curTile.substring(0,5)+'…';
    }
    
    context.lineWidth = 0;
    context.font = "18px Microsoft YaHei";
    context.fillStyle = "#009FE7";
    context.strokeStyle = "#FFFFFF";
    context.fillText(curTile, circle.x+20, circle.y+25)
    
    
    context.font = "12px Microsoft YaHei";
    context.fillStyle = "#999999";
    context.strokeStyle = "#FFFFFF";
    context.fillText(circle.board.cpus.length+'个芯片', circle.x+20, circle.y+50)

    drawOneImage('../images/ex.png', circle.x+20, circle.y+55,20 , 20, null);

}
/**
 *	写文字
 */
function drawOneFont(circle){
    //设置样式
    context.lineWidth = 2;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#F5270B";
    context.fillText(circle.text, circle.x, circle.y)
}

/**
 *	画一张图片 这张图片如果是未加载的 等待加载后 加入到内存中
 */
function drawOneImage(imgSrc , x , y ,width, height,circle,fun){
	if(imgSrc != null){
		if(imgs[imgSrc]==null){
			var img = new Image()
			img.src = imgSrc;
			img.onload = function(){
				imgs[imgSrc] = img;
				context.drawImage(img, x, y,width,height);
				if(circle&&circle.title2!=null) {
					context.fillStyle = "#eeeeee";
					context.strokeStyle = "black";
					drawOneRect2(circle);
					context.stroke();
				}
			}
		} else {
			context.drawImage(imgs[imgSrc], x, y,width,height);
		}
	}else{
		if(circle&&circle.title2!=null) {
			context.fillStyle = "#eeeeee";
			context.strokeStyle = "black";
			drawOneRect2(circle);
			context.stroke();
		}
	}
    if(fun){
        fun();
    }
}
/**
 *	加载一张图片
 */
function loadOneImage(imgSrc){
    if(imgs[imgSrc]==null){
        var img = new Image()
        img.src = imgSrc;
        setTimeout(function(){},1000);
        img.onload = function(){
            imgs[imgSrc] = img;
        }
    }
}

/**
 *	是鼠标单击
 */
var levelType = 0;
var canvasAllLevelObj = [];
function canvasMouseClick(e){
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-80+table_box_scroll_top;
    var isCancelChoose = false;
    var isChooseOne = false;
    if(mouseInitX >= clickX-5 && mouseInitX <= clickX+5 && mouseInitY >= clickY-5&& mouseInitY <= clickY+5){
        //判断选中的是几级
        var isChooseOne = false;
        for(var i = 0 ; i < canvasAllLevel2.length; i++) {
            var circle = canvasAllLevel2[i];
            if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
                //选中了这个元素
                levelType=2;
                $("#bottom4").hide();
                if(!isCancelChoose){
                    addCanvasAllLevelObj(circle , i , 2);
                }
                drawCircles();
                isChooseOne = true;
                break;
            }
        }
        if(!isChooseOne){
            for(var i = 0 ; i < canvasAllLevel1.length; i++) {
                var circle = canvasAllLevel1[i];
                if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
                    //选中了这个元素
                    levelType=1;
                    $(".editPOP").hide();
                    $("#bottom4").hide();

                    if(!isCancelChoose){
                        addCanvasAllLevelObj(circle , i , 1);
                    }
                    drawCircles();
                    break;
                }
            }
        }
    }

}
/**
 *	点击画布 查找有无选中的对象
 *
 */
var mouseInitX = 0;
var mouseInitY = 0;
function canvasClick(e) {
    canvasClickBoolean = true;
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
    mouseInitX = clickX;
    mouseInitY = clickY;
    // 查找被单击的對象
    var isChooseOneObj = false;

    for(var i = 0 ; i < circles.length; i++) {
        var circle = circles[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            if(circle.text !=null){
                isChooseOneObj = false;
            }
        }

        // 判断这个点是否在对象中
        if(isChooseOneObj){
            // 清除之前选择的对象
            previousSelectedCircle = circle;
            moveAllObjs.push(circle);
            canvasTuoLevel = previousSelectedCircle.level;
            dragLines1 = [];
            dragLines2 = [];
            for(var i = 0 ; i < lineObjs.length ; i++){
                var lineObj = lineObjs[i];
                // 将对象移动到鼠标位置
                if(lineObj.obj1.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj1.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines1.push(lineObj);
                }else if(lineObj.obj2.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj2.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines2.push(lineObj);
                }
            }
            // 使对象允许拖拽
            isDragging = true;
            //更新显示
            drawCircles();
            chooseObjInitPlace.x = circle.x;
            chooseObjInitPlace.y = circle.y;
            chooseObjInitPlace.pIndex = circle.pIndex;
			canvasAllLevel2OldObj = null;
            //停止搜索
            return;
        }else{
            previousSelectedCircle = null;
            canvasTuoLevel = 0;
            chooseObjInitPlace = {};
        }
    }

    /**
     * 如果拖拽是二级元素的话 和别的二级元素重合后互换位置 要不然放开后回到原点
     */
    for(var i = 0 ; i < canvasAllLevel2.length; i++) {
        var circle = canvasAllLevel2[i];
        initDomPlace(canvasAllLevel2 , i);
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            if(circle.text !=null){
                isChooseOneObj = false;
            }
        }

        // 判断这个点是否在对象中
        if(isChooseOneObj){
        	moveAllObjs.push(circle);
            // 清除之前选择的对象
            previousSelectedCircle = circle;
            canvasAllLevel2OldObj = {};
            canvasAllLevel2OldObj.x = circle.x;
            canvasAllLevel2OldObj.y = circle.y;
            canvasAllLevel2OldObj.pIndex = circle.pIndex;
            dragLines1 = [];
            dragLines2 = [];
            for(var i = 0 ; i < lineObjs.length ; i++){
                var lineObj = lineObjs[i];
                // 将对象移动到鼠标位置
                if(lineObj.obj1.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj1.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines1.push(lineObj);
                }else if(lineObj.obj2.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj2.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines2.push(lineObj);
                }
            }
            // 使对象允许拖拽
            isDragging = true;
            //更新显示
            drawCircles();
            chooseObjInitPlace.x = circle.x;
            chooseObjInitPlace.y = circle.y;
            chooseObjInitPlace.pIndex = circle.pIndex;
            //停止搜索
            break;
        }else{
            previousSelectedCircle = null;
            canvasAllLevel2OldObj = null;
            canvasTuoLevel = 0;
            chooseObjInitPlace = {};
        }
    }
}
/**
 *	点击画布的时候 记录一下原有元素的位置 用于连线
 *	是否需要记录点击元素的原有位置 暂未使用
 */
function initDomPlace(circles , index){
    oldCircles = new Array();
    for(var i = 0 ; i < circles.length ; i++){
        if(i == index){
            continue;
        }
        var circleObj = {};
        circleObj.x = circles[i].x;
        circleObj.y = circles[i].y;
        circleObj.img = circles[i].img;
        circleObj.width = circles[i].width;
        circleObj.height = circles[i].height;
        circleObj.id = circles[i].id;
        if(circles[i].machineBox!=null){
        	circleObj.id=circles[i].machineBox.id;
        	circleObj.machineBox=circles[i].machineBox;
        }
        if(circles[i].board!=null){
        	circleObj.id=circles[i].board.id;
        	circleObj.board=circles[i].board;
        }
        circleObj.positionId = circles[i].positionId;
        circleObj.pIndex = circles[i].pIndex;
        circleObj.oldIndex = i;
        oldCircles.push(circleObj);
    }
}
/**
 * 拖拽元素
 */
var canvasClickBoolean = false;
function dragCircle(e) {
	//$(".editPOP").hide();

    if(canvasClickBoolean){
        canvasClickBoolean = false;
        return;
    }
    // 判断对象是否开始拖拽
    if (isDragging == true) {
        // 判断拖拽对象是否存在
        if (previousSelectedCircle != null) {
            // 取得鼠标位置
            var x = e.pageX - canvas.offsetLeft-320;
            var y = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
            // 将对象移动到鼠标位置
            previousSelectedCircle.x = x - previousSelectedCircle.width/2;
            previousSelectedCircle.y = y - previousSelectedCircle.height/2;
            for(var i = 0 ; i < dragLines1.length ; i++){
                dragLines1[i].obj1.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines1[i].obj1.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            for(var i = 0 ; i < dragLines2.length ; i++){
                dragLines2[i].obj2.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines2[i].obj2.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            // 更新画布
            drawCircles();
        }
    }
}

/**
 *	停止拖拽的时候触发的事件
 *	查看拖拽的元素 放开的时候 是否在某个一级中 如果在的话 触发事件 新增一个二级元素 并且在固定位置
 */
function outMouseDragging(e){
	moveAllObjs = [];
    isDragging = false;
    isChooseOneObj=false;
    var noLevel2=true;
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
    if(canvasAllLevel2OldObj != null){
        //拖拽的是二级元素 如果有和别二级元素重合 互换位置 不然 重新回到原来的位置
        for(var i = 0 ; i < oldCircles.length; i++) {
            var circle = oldCircles[i];
            if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                //选中了这个元素
                isChooseOneObj = true;
                noLevel2=false;
                lineObj = circle;
                break;
            }
        }
        // 判断这个点是否在对象中
        if(isChooseOneObj){
            //让拖拽的这个归位
            previousSelectedCircle.x  = circle.x;
            previousSelectedCircle.y  = circle.y;
            previousSelectedCircle.pIndex  = circle.pIndex;
            canvasAllLevel2[circle.oldIndex].x = canvasAllLevel2OldObj.x;
            canvasAllLevel2[circle.oldIndex].y = canvasAllLevel2OldObj.y;
            canvasAllLevel2[circle.oldIndex].pIndex = canvasAllLevel2OldObj.pIndex;
           
            //更新显示
            if(e.data.fun5) {
            	if(previousSelectedCircle!==null&&lineObj!=null){
                    e.data.fun5(previousSelectedCircle , canvasAllLevel2[circle.oldIndex]);
            	}
            }
            previousSelectedCircle = {};
            drawCircles();
            //停止搜索
            
            return;
        }else if(noLevel2){
            noLevel2=false;
            for(var l2=0;l2<canvasAllLevel1.length;l2++){
       		 	var circle = canvasAllLevel1[l2];
            	if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                    //选中了这个元素
        		  previousSelectedCircle.board.machineBoxId=circle.machineBox.id;
                 //ar curChange=  addCanvasLevel2(circle.index, e.data, previousSelectedCircle.board);
                    if(e.data.fun5) {
                    	if(previousSelectedCircle!==null){
                            e.data.fun5(previousSelectedCircle ,null);
                    	}
                    }
                   break;
                }
            }
            
            canvasAllLevel2OldObj=null;
        	var newLevle2=canvasAllLevel2;
        	canvasAllLevel2=[];
        	var newLevel1=canvasAllLevel1;
        	canvasAllLevel1=[];
            drawCircles();

        	for(var l1=0;l1<newLevel1.length;l1++){
        		 var circle = newLevel1[l1];
        		 var curLevel1=addCanvasLevel1(l1 , 0,circle.machineBox);
        		 for(var l22=0;l22<newLevle2.length;l22++){
            		if(newLevle2[l22].board.machineBoxId==newLevel1[l1].machineBox.id){
                        addCanvasLevel2(curLevel1.index, e.data, newLevle2[l22].board);
            		}
            	}
        	}
        	 previousSelectedCircle = {};
             drawCircles();
             return;

        }else{
            previousSelectedCircle.x  = canvasAllLevel2OldObj.x;
            previousSelectedCircle.y  = canvasAllLevel2OldObj.y;
            drawCircles();
            lineObj = null;
        }
    }else {
    	//$(".editPOP").hide();
        //停止拖拽	要归位
        if (canvasType == 1) {
            //一级为主机
            var initData = new Array();
            for (var i = 0; i < circlesData1.length; i++) {
                var obj = circlesData1[i];
                var newObj = {};
                newObj.x = obj.x;
                newObj.y = obj.y + table_box_scroll_top;
                newObj.width = obj.width;
                newObj.height = obj.height;
                newObj.img = obj.img;
                newObj.level = obj.level;
                newObj.text = obj.text;
                newObj.machineBox = obj.machineBox;
                initData.push(newObj);
            }
            circles = initData;
        } else if (canvasType == 2) {
            //一级为板卡
            var initData = new Array();
            for (var i = 0; i < circlesData2.length; i++) {
                var obj = circlesData2[i];
                var newObj = {};
                newObj.x = obj.x;
                newObj.y = obj.y + table_box_scroll_top;
                newObj.width = obj.width;
                newObj.height = obj.height;
                newObj.img = obj.img;
                newObj.level = obj.level;
                newObj.text = obj.text;
                newObj.imgId = obj.imgId;
                newObj.board = obj.board;
                initData.push(newObj);
            }
            circles = initData;
        } else if (canvasType == 3) {
            //一级为板卡
            var initData = new Array();
            for (var i = 0; i < circlesData3.length; i++) {
                var obj = circlesData3[i];
                var newObj = {};
                newObj.x = obj.x;
                newObj.y = obj.y + table_box_scroll_top;
                newObj.width = obj.width;
                newObj.height = obj.height;
                newObj.img = obj.img;
                newObj.level = obj.level;
                newObj.text = obj.text;
                newObj.imgId = obj.imgId;
                initData.push(newObj);
            }
            circles = initData;
        }
        drawCircles();
        var isChooseOneObj = false;
        if (canvasTuoLevel == 1) {
            //一级
            if (previousSelectedCircle != null) {
            	dissaveMachine();
            	if(clickX <= canvas.offsetLeft + canvas.width-150){
            		$("#bottom2").show();
            		$(".editPOP").show();
            		saveMachines(canvasAllLevel1.length + 1, 0);
            	}
                previousSelectedCircle = null;
               // addCanvasLevel1(canvasAllLevel1.length + 1, 0);
            }
        } else if (canvasTuoLevel == 2) {
            //alert(JSON.stringify(previousSelectedCircle));
            if (previousSelectedCircle == null) {
                return;
            }
            //var imgId = previousSelectedCircle.imgId;
            var canvasAllHostIndex = -1; //第几个一级
            for (var i = 0; i < canvasAllLevel1.length; i++) {
                var circle = canvasAllLevel1[i];
                if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
                    //选中了这个元素
                    isChooseOneObj = true;
                    canvasAllHostIndex = circle.index;
                }
                // 判断这个点是否在对象中
                if (isChooseOneObj) {
                   
                    //addCanvasLevel2(canvasAllHostIndex, e.data, data);
                    newBoard(canvasAllHostIndex ,  e.data )
                    previousSelectedCircle = null;

                    //更新显示
                    drawCircles();
                    //停止搜索
                    return false;
                } else {
                    lineObj = null;
                }
            }
        } else if (canvasTuoLevel == 3) {
            if (previousSelectedCircle == null) {
                return;
            }
            var canvasAllHostIndex = -1; //第几个二级
            var canvasAllHostPIndex = -1;//二级的父Index
            for (var i = 0; i < canvasAllLevel2.length; i++) {
                var circle = canvasAllLevel2[i];
                if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
                    //选中了这个元素
                    isChooseOneObj = true;
                    canvasAllHostPIndex = circle.pIndex;
                }
                // 判断这个点是否在对象中
                if (isChooseOneObj) {
                    //新增一个三级元素 要根据type还有这个二级下有几个三级 计算位置
                    addCanvasLevel3(i, canvasAllHostPIndex, e.data);
                    //更新显示
                    previousSelectedCircle = null;
                    drawCircles();
                    //停止搜索
                    return;
                } else {
                    lineObj = null;
                }
            }
        }
    }
}

/**
 *	新增一个一级元素
 */
function addCanvasLevel1(index , funs,data){
	 isChooseOneObj = false;
    var title = '';
    var canvasAllLevel1Obj = {};
    canvasAllLevel1Obj.count = 0;
    canvasAllLevel1Obj.index = canvasAllLevel1.length;
    canvasAllLevel1Obj.y = 80;
    canvasAllLevel1Obj.level =1;
    canvasAllLevel1Obj.machineBox = data;
    if(canvasType == 1 || canvasType == 3){
        title = '主机'+index;
        if(data.machineBoxName){
        	title=	data.machineBoxName;
        }
        canvasAllLevel1Obj.title = title;
        canvasAllLevel1Obj.width = 180;
        canvasAllLevel1Obj.height = 220;
        //主机-板卡 最多两个
        if(canvasAllLevel1.length >= 2){
            //最多有两个 不能继续增加了
        	previousSelectedCircle = null;
            alert('有两个主机了!!')
            drawCircles();
            return ;
        }else if(canvasAllLevel1.length == 0){
            //可以增加 如果没有过主机 给他放第一个位置
            canvasAllLevel1Obj.x = 50;
        }else if(canvasAllLevel1.length == 1){
            //如果有一个主机 算一下第一个主机的宽度 给他放到第二个位置
            canvasAllLevel1Obj.x = (canvasAllLevel1[0].x + canvasAllLevel1[0].width + 80);
        }
    }else if(canvasType == 2){
        title = '板卡'+index;
        canvasAllLevel1Obj.title = title;

        //板卡-处理单元 一排四个  可以有多个
        var objy = 80;
        var objx = 80;
        if(canvasAllLevel1.length > 3){
            //超过一排 计算 一下位置高度
            if(canvasAllLevel1.length % 4 == 0){
                //最后一个的高度 另起一排
                objy = canvasAllLevel1[canvasAllLevel1.length-1].y + 300 ;
            }else{
                //最后一个的高度 应该是新增这个的高度
                objy = canvasAllLevel1[canvasAllLevel1.length-1].y;
                objx = canvasAllLevel1[canvasAllLevel1.length-1].x + 300;
            }
        }else{
            objx = objx + 300 * canvasAllLevel1.length;
        }
        canvasAllLevel1Obj.x = objx;
        canvasAllLevel1Obj.y = objy;
    }
    if(funs){
    	if(funs.id){
    		canvasAllLevel1Obj.id = funs.id;
    	}
    	if(funs.param){
    		canvasAllLevel1Obj.param = funs.param;
    	}
    	if(funs.title){
    		canvasAllLevel1Obj.title = funs.title;
    	}
    	if(funs.index){
    		canvasAllLevel1Obj.index = funs.index;
    	}
    }
    canvasAllLevel1.push(canvasAllLevel1Obj);
    drawCircles();
    return canvasAllLevel1Obj;
    previousSelectedCircle = null;
    var height = canvas.height;
	if(canvasAllLevel1Obj.y +canvasAllLevel1Obj.height+40> height){
		canvas.height = canvasAllLevel1Obj.y + canvasAllLevel1Obj.height+50;
	}
}
/**
 *	新增一个二级元素
 */
function addCanvasLevel2(index , funs,data){
    var canvasAllLevel2Obj = {};

    canvasAllLevel2Obj.pIndex = index;
    canvasAllLevel2Obj.level = 2;
    canvasAllLevel2Obj.board = data;
    canvasAllLevel2Obj.index = canvasAllLevel2.length+1;
    for(var i = 0 ; i < canvasAllLevel1.length ; i++){
        var obj = canvasAllLevel1[i];
        if(obj.index == index){
            index = i;
        }
    }



    //计算各种位置
    //查看本一级下有几个二级
    if(canvasType == 1 || canvasType == 3){
        canvasAllLevel2Obj.width = 100;
        canvasAllLevel2Obj.height = 80;
        canvasAllLevel2Obj.img='./images/topology/boarder.png';
        // 	主机-板卡 一排四个
        var myCount = 0;
		var maxIndex = -1;
        for(var i = 0 ; i < canvasAllLevel2.length ; i++){
            var canvasLevel2 = canvasAllLevel2[i];
            if(canvasLevel2.pIndex == index){
                //记录我这个主机下有多少个板卡
                myCount++;
				maxIndex = i;
            }
        }
		 var curNo=myCount+1;
		if(maxIndex != -1){
			curNo = parseInt(canvasAllLevel2[maxIndex].title2.substring(2)) + 1;
		}
       
        title2 = '板卡'+curNo;
        if(data.boardName){
        	title2=data.boardName;
        }
        if(myCount>31){
			alert("板卡数量上限32个");
			return false;}
        canvasAllLevel2Obj.title2 = title2;
        canvasAllLevel1[index].count = myCount+1;
        //计算我这个一级的宽度
        if(myCount > 3){

            //宽度固定了  判断是否需要改变主机的高度
            if(myCount % 4 == 0){
                //另起一排 增加本主机的高度
                canvasAllLevel1[index].height = canvasAllLevel1[index].height + 120;
                canvasAllLevel2Obj.y = canvasAllLevel1[index].y + 80 + 120*(myCount / 4);
                canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30;
            }else{
               // canvasAllLevel2Obj.y = canvasAllLevel1[index].y + 40 + 160*((myCount -( myCount%4)) / 4);
				canvasAllLevel2Obj.y = canvasAllLevel1[index].y + 80 + 120*((myCount -( myCount%4)) / 4);

                canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30 + 130*(myCount%4);
            }
        }else{
            canvasAllLevel2Obj.y = 160;
            //不足四个 第一排增加元素 主机宽度增加 如果是一个元素并且有第二个主机 第二个主机往右移动
            if(myCount != 0){
                canvasAllLevel1[index].width = canvasAllLevel1[index].width + 130;
                canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30 + 130*myCount;
            }else{
                canvasAllLevel2Obj.x = canvasAllLevel1[index].x + 30;
            }
            if(index == 0 && canvasAllLevel1.length == 2){
                //是一个元素并且有第二个主机 第二个主机往右移动
                canvasAllLevel1[1].x = (canvasAllLevel1[0].x + canvasAllLevel1[0].width + 80);
                if(myCount != 0){
                    for(var k = 0 ; k < canvasAllLevel2.length ; k++){
                        var canvasAllLevel1Obj = canvasAllLevel2[k];
                        if(canvasAllLevel1Obj.pIndex == 1){
                            canvasAllLevel1Obj.x = (canvasAllLevel1Obj.x + 130);
                        }
                    }
                }
            }
        }
    }

    /* //匹配对应的CPU
    if(imgNo==1){
        canvasAllLevel2Obj.img='../images/topology/ppc.png';
    }else if(imgNo==2){
        canvasAllLevel2Obj.img='../images/topology/SW.png';
    }else if(imgNo==3){
        canvasAllLevel2Obj.img='../images/topology/DSP.png';
    }else if(imgNo==4){
        canvasAllLevel2Obj.img='../images/topology/FPGA.png';
    }else if(imgNo==5){
        canvasAllLevel2Obj.img='../images/topology/ARM.png';
    } */
	var height = canvas.height;
	if(canvasAllLevel2Obj.y > height){
		canvas.height = canvasAllLevel2Obj.y + 80;
	}
	if(funs){
    	if(funs.id){
    		canvasAllLevel2Obj.id = funs.id;
    	}
    	if(funs.param){
    		canvasAllLevel2Obj.param = funs.param;
    	}
    	if(funs.title2){
    		canvasAllLevel2Obj.title2 = funs.title2;
    	}
    	if(funs.index){
    		canvasAllLevel2Obj.title = funs.index;
    	}
    	if(funs.pIndex){
    		canvasAllLevel2Obj.pId = funs.pId;
    	}
    }
	//return canvasAllLevel2Obj;
    canvasAllLevel2.push(canvasAllLevel2Obj);
    //回调函数
    drawCircles();
    var height = canvas.height;
	if(canvasAllLevel1[index].y +canvasAllLevel1[index].height+40> height){
		canvas.height = canvasAllLevel1[index].y + canvasAllLevel1[index].height+50;
	}
	return canvasAllLevel2Obj;

}

/**
 *	新增一个三级元素
 */
function addCanvasLevel3(index ,pIndex, funs){
    var canvasAllLevel3Obj = {};

    canvasAllLevel3Obj.ppIndex = pIndex;
    canvasAllLevel3Obj.width = 30;
    canvasAllLevel3Obj.height = 30;
    canvasAllLevel3Obj.img = '../images/topology/ppc.png';

    for(var i = 0 ; i < canvasAllLevel2.length ; i++){
        var obj = canvasAllLevel2[i];
        if(obj.index == index && obj.ppIndex == pIndex){
            index = i;
        }
    }
    canvasAllLevel3Obj.pIndex = index;
    //	板卡-处理单元 一排两个 最多四个
    var myCount = 0;
    for(var i = 0 ; i < canvasAllLevel3.length ; i++){
        var canvasLevel3 = canvasAllLevel3[i];
        if(canvasLevel3.pIndex == index&& canvasLevel3.ppIndex == pIndex){
            //记录我这个主机的这个板卡下有多少个处理单元
            myCount++;
        }
    }
    if(myCount >= 4){
        //一个板卡中最多有四个处理单元
        alert('一个板卡最多四个处理单元');
        drawCircles();
        return;
    }else{
        canvasAllLevel2[index].count = myCount+1;
        //在我这个板卡中 有四个位置 看看是在哪个区域内
        if(myCount == 0){
            canvasAllLevel3Obj.x = canvasAllLevel2[index].x + 15
            canvasAllLevel3Obj.y = canvasAllLevel2[index].y + 10
        }else if(myCount == 1){
            canvasAllLevel3Obj.x = canvasAllLevel2[index].x + 55
            canvasAllLevel3Obj.y = canvasAllLevel2[index].y + 10
        }else if(myCount == 2){
            canvasAllLevel3Obj.x = canvasAllLevel2[index].x + 15
            canvasAllLevel3Obj.y = canvasAllLevel2[index].y + 45
        }else if(myCount == 3){
            canvasAllLevel3Obj.x = canvasAllLevel2[index].x + 55
            canvasAllLevel3Obj.y = canvasAllLevel2[index].y + 45
        }
    }
    canvasAllLevel3.push(canvasAllLevel3Obj);
    //回调函数
    drawCircles();
}


/**
 *	画线 共通算法 包括拖拽跟随也是这个
 */
function DrawLine(obj1Place , obj2Place , count ,  ctx){
    var xDiff = obj1Place.x - obj2Place.x;
    var yDiff = obj1Place.y - obj2Place.y;
    xDiff = Math.abs(xDiff);//x差绝对值
    yDiff = Math.abs(yDiff);//y差绝对值
    var line1End = {};//第一条线的结束点
    var line2Start = {};//第二条线的开始点
    var textPlace = {};
    //分为四种情况
    if(obj1Place.x >= obj2Place.x && obj1Place.y >= obj2Place.y){
        line2Start.x = obj1Place.x - xDiff * 3 / 5;
        line2Start.y = obj1Place.y - yDiff * 3 / 5;

        line1End.x = obj1Place.x - xDiff * 2 / 5;
        line1End.y = obj1Place.y - yDiff * 2 / 5;

        textPlace.x = line1End.x - xDiff * 1 / 10;
        textPlace.y = line1End.y - yDiff * 1 / 10;
    }else if(obj1Place.x >= obj2Place.x && obj1Place.y <= obj2Place.y){
        line2Start.x = obj1Place.x - xDiff * 3 / 5;
        line2Start.y = obj1Place.y + yDiff * 3 / 5;

        line1End.x = obj1Place.x - xDiff * 2 / 5;
        line1End.y = obj1Place.y + yDiff * 2 / 5;

        textPlace.x = line1End.x - xDiff * 1 / 10;
        textPlace.y = line1End.y + yDiff * 1 / 10;
    }else if(obj1Place.x <= obj2Place.x && obj1Place.y >= obj2Place.y){
        line2Start.x = obj1Place.x + xDiff * 3 / 5;
        line2Start.y = obj1Place.y - yDiff * 3 / 5;

        line1End.x = obj1Place.x + xDiff * 2 / 5;
        line1End.y = obj1Place.y - yDiff * 2 / 5;

        textPlace.x = line1End.x + xDiff * 1 / 10;
        textPlace.y = line1End.y - yDiff * 1 / 10;
    }else if(obj1Place.x <= obj2Place.x && obj1Place.y <= obj2Place.y){
        line2Start.x = obj1Place.x + xDiff * 3 / 5;
        line2Start.y = obj1Place.y + yDiff * 3 / 5;

        line1End.x = obj1Place.x + xDiff * 2 / 5;
        line1End.y = obj1Place.y + yDiff * 2 / 5;

        textPlace.x = line1End.x + xDiff * 1 / 10;
        textPlace.y = line1End.y + yDiff * 1 / 10;
    }
    ctx.setLineDash([15,5])
    ctx.fillStyle='black';
    //设置对象起始点和终点
    ctx.moveTo(obj1Place.x,obj1Place.y);
    ctx.lineTo(line1End.x,line1End.y);
    ctx.fillText(count, textPlace.x, textPlace.y)
    //设置样式
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#F5270B";
    //绘制
    ctx.stroke();
    ctx.moveTo(line2Start.x,line2Start.y);
    ctx.lineTo(obj2Place.x,obj2Place.y);
    ctx.stroke();
}

/**
 *	十字连线的时候的方法
 */
function DrawLine2(obj , ctx){
    ctx.setLineDash([5,5])
    ctx.fillStyle='black';
    //设置对象起始点和终点
    ctx.moveTo(obj.startx,obj.starty);
    ctx.lineTo(obj.endx,obj.endy);
    //设置样式
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#F5270B";
    //绘制
    ctx.stroke();
}
/**
 *	增加或取消连线的数据
 */
function addLineOrCancel(obj1 , obj2 , count , funs){
    var isLine = true;
    var lineIndex = -1;
    for(var i = 0 ; i < lineObjs.length ; i++){
        var lineObj = lineObjs[i];
        if(lineObj.obj1.x == obj1.x && lineObj.obj1.y == obj1.y && lineObj.obj2.x == obj2.x && lineObj.obj2.y == obj2.y ){
            //已经连线过 删除这条线 A连B 和 B连A 都要取消
            lineIndex = i;
            break;
        }else if(lineObj.obj1.x == obj2.x && lineObj.obj1.y == obj2.y && lineObj.obj2.x == obj1.x && lineObj.obj2.y == obj1.y){
            lineIndex = i;
            break;
        }
    }
    if(lineIndex == -1){
        lineObjs.push({obj1:obj1 , obj2:obj2 , count:count});
        if(funs != null && funs.fun1){
            funs.fun1(obj1 , obj2);
        }
    }else{
        if(previousSelectedCircleStartLine != null){
            //已经连线过
            alert("这两个元素已经连线了!")
            return;
        }
        var newLines = new Array();
        for(var i = 0 ; i < lineObjs.length ; i++){
            var lineObj = lineObjs[i];
            if(i != lineIndex){
                // 删除这条线
                var newLine = {obj1:lineObj.obj1 , obj2:lineObj.obj2 , count:lineObj.count};
                newLines.push(newLine);
            }
        }
        lineObjs = newLines;
        if(funs != null && funs.fun2){
            funs.fun2(obj1 , obj2);
        }
    }
}
/**
 *	两个元素中的中心进行连线
 *	obj1 : 	拖拽的元素
 *	obj2:	被动链接的元素
 */
function doLine(obj1 , obj2 ,count , funs){
    /** 这部分先注释 将来再说 现在只是中心连线
     //首先 获取到两个对象的上下左右四个点 一共是八个点
     var obj1Top = {};
     var obj1Left = {};
     var obj1Right = {};
     var obj1Bottom = {};
     if(obj1.img != null){
		obj1Top.x = obj1.x + 25;
		obj1Top.y = obj1.y;

		obj1Left.x = obj1.x;
		obj1Left.y = obj1.y + 25;

		obj1Right.x = obj1.x + 50;
		obj1Right.y = obj1.y + 25;

		obj1Bottom.x = obj1.x + 25;
		obj1Bottom.y = obj1.y + 50;
	}else{
		obj1Top.x = obj1.x + obj1.width / 2;
		obj1Top.y = obj1.y;

		obj1Left.x = obj1.x;
		obj1Left.y = obj1.y + obj1.height / 2;

		obj1Right.x = obj1.x + obj1.width;;
		obj1Right.y = obj1.y + obj1.height / 2;;

		obj1Bottom.x = obj1.x + obj1.width / 2;;
		obj1Bottom.y = obj1.y + obj1.height;
	}
     var obj2Top = {};
     var obj2Left = {};
     var obj2Right = {};
     var obj2Bottom = {};

     if(obj2.img != null){
		obj2Top.x = obj2.x + 25;
		obj2Top.y = obj2.y;

		obj2Left.x = obj2.x;
		obj2Left.y = obj2.y + 25;

		obj2Right.x = obj2.x + 50;
		obj2Right.y = obj2.y + 25;

		obj2Bottom.x = obj2.x + 25;
		obj2Bottom.y = obj2.y + 50;
	}else{
		obj2Top.x = obj2.x + obj2.width / 2;
		obj2Top.y = obj2.y;

		obj2Left.x = obj2.x;
		obj2Left.y = obj2.y + obj2.height / 2;

		obj2Right.x = obj2.x + obj2.width;;
		obj2Right.y = obj2.y + obj2.height / 2;;

		obj2Bottom.x = obj2.x + obj2.width / 2;;
		obj2Bottom.y = obj2.y + obj2.height;
	}
     //八个点算完了 取最短的两个点的位置 然后生成连线对象
     */
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2;
    obj1Place.y = obj1.y + obj1.height / 2;
    obj1Place.id = obj1.id;
    obj2Place.x = obj2.x + obj2.width / 2;
    obj2Place.y = obj2.y + obj2.height / 2;
    obj2Place.id = obj2.id;
    addLineOrCancel(obj1Place , obj2Place , count ,funs);
}

/**
 *	画线  重置点击 拖拽事件
 */
function setDrawLine(cursorstyle, fun1 , fun2 , obj) {
    var clicktype = obj.attr('clicktype');
    if(clicktype == "1"){
        //想要连线
        obj.attr('clicktype','2');
        if (document.getElementById('myCanvas').style) {
            document.getElementById('myCanvas').style.cursor=cursorstyle;
        }
        var funObj = {fun1:fun1,fun2:fun2};
        $(canvas).unbind('mousedown').bind('mousedown', canvasLineClick);
        $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseLineDragging);
        $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseLineDragging);
        $(canvas).unbind('mousemove').bind('mousemove' , dragLineCircle);
    }else{
        //点完连线后不想连线了
        cancelDrawLine();

    }
}

/**
 *	连上线了之后 重置拖拽事件
 */
function cancelDrawLine(){
    if (document.getElementById('myCanvas').style) {
        document.getElementById('myCanvas').style.cursor='pointer';
    }
    var funObj = {fun1:canvasInitData.fun1,fun2:canvasInitData.fun2};
    $(canvas).unbind('mousedown').bind('mousedown', canvasClick);
    $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseDragging);
    $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseDragging);
    $(canvas).unbind('mousemove').bind('mousemove' , dragCircle);
}

/**
 *	画线的时候 点击画布 查找有无选中的对象
 *
 */
function canvasLineClick(e) {
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < canvasAllLevel3.length; i++) {
        var circle = canvasAllLevel3[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleStartLine = circle;
            initDomPlace(canvasAllLevel3,i);
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){

    }else{
        previousSelectedCircleStartLine = null;
        alert("未选中一个对象!");
    }
}
/**
 *	画线的时候 松开鼠标的时候看看有没有元素选中 有的话 连线
 */
function outMouseLineDragging(e){
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < oldCircles.length; i++) {
        var circle = oldCircles[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleEndLine = circle;
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){
        //放开鼠标的时候 也有元素 让这两个元素 连线
        doLine(previousSelectedCircleStartLine , previousSelectedCircleEndLine , 0 ,e.data);
        previousSelectedCircleStartLine = null;
        drawLineObj = {};
        drawCircles();
        cancelDrawLine();
    }else{
        if(previousSelectedCircleStartLine != null){
            previousSelectedCircleStartLine = null;
            drawLineObj = {};
            drawCircles();
            alert("未选中一个对象!");
        }
    }
}
var drawLineObj = {};
/**
 *	画线
 */
function dragLineCircle(e){
    var clickX = e.pageX - canvas.offsetLeft-320;
    var clickY = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
    // 判断拖拽对象是否存在
    if (previousSelectedCircleStartLine != null) {
        // 	取得鼠标位置
        var x = e.pageX - canvas.offsetLeft-320;
        var y = e.pageY - canvas.offsetTop-80 +  table_box_scroll_top;
        //	画一条线 起点是选中元素的中心 终点是鼠标的位置
        drawLineObj.startx = previousSelectedCircleStartLine.x + previousSelectedCircleStartLine.width/2;
        drawLineObj.starty = previousSelectedCircleStartLine.y + previousSelectedCircleStartLine.height/2;
        drawLineObj.endx = clickX;
        drawLineObj.endy = clickY;

        // 更新画布
        drawCircles();
    }
}


/**
 *	增加选中的边框的方法
 */
function addCanvasAllLevelObj(obj , index , level){
    cancelChoose();
    var newObj = {};
    newObj.x = obj.x;
    newObj.y = obj.y;
    newObj.width = obj.width;
    newObj.height = obj.height;
    newObj.level = level;
    newObj.index = index;
    if(obj.level==2){
    	obj.color='#009EE7';
    	newObj.color='';
    	if(obj.board){
        	$("#boardId2").val(obj.board.boardId);
            $("#boardName2").val(obj.board.boardName);
            $("#boardType2").val(obj.board.boardType);
            $("#remark2").val(obj.board.remark);
            $("#bottom14").hide();
            $("#bottom1").show();
           // $(".table-box").css({"bottom":"100px"});
        }
    }
    if(obj.level==1){
    	if(obj.machineBox){
    		obj.color='#009EE7';
        	newObj.color='#009EE7';
 			var machineBoxNo=obj.machineBox.machineBoxNo;
 			$("#machineBoxNo2").val(machineBoxNo);
            $("#machineBoxName2").val(obj.machineBox.machineBoxName);
            $("#machineBoxRemark2").val(obj.machineBox.remark);
            $("#bottom4").show();
            $("#bottom1").hide();
            $(".table-box").css({"bottom":"100px"});
        }
    }
    canvasAllLevelObj.push(newObj);
}
/**
 *	取消选中的颜色
 */
function cancelChoose(){
    for(var i = 0 ; i < canvasAllLevelObj.length ; i++){
        var obj = canvasAllLevelObj[i];
        if(obj.level==1){
           // canvasAllLevel1[obj.index].color = "#ffffff";
        }else if(obj.level==2){
            canvasAllLevel2[obj.index].color = "#ffffff";
        }
    }
    canvasAllLevelObj = [];
}